<template>
  <div class="imglist">
    <div class="list" v-for="item in list">
      <img :src="item.url" alt="">
    </div>
  </div>
</template>
<script>
  // 定义全局指令
  /*Vue.directive('img',{
    inserted:function(el, binding){
      var color = Math.floor(Math.random()*1000000);
      el.style.backgroundColor = "#" + color;
      var img = new Image();
      img.src = binding.value; //获得传给指令的值
      img.onload = function(){
        el.style.backgroundImage = 'url(' + binding.value + ')';
      }
    }
  })*/

  export default {
    name: "lunbo",
    
    data(){
      return{
        list:[
          {
            url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523358733178&di=633993f8baa773b24f34cc5f491be2bd&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D608211dfad86c9171c0e5a7aa1541aba%2F7e3e6709c93d70cfce8f5f2af2dcd100baa12ba4.jpg"
          },
          {
            url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523358733178&di=633993f8baa773b24f34cc5f491be2bd&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D608211dfad86c9171c0e5a7aa1541aba%2F7e3e6709c93d70cfce8f5f2af2dcd100baa12ba4.jpg"
          },
          {
            url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523358733178&di=633993f8baa773b24f34cc5f491be2bd&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D608211dfad86c9171c0e5a7aa1541aba%2F7e3e6709c93d70cfce8f5f2af2dcd100baa12ba4.jpg"
          },
          {
            url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523358733178&di=633993f8baa773b24f34cc5f491be2bd&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D608211dfad86c9171c0e5a7aa1541aba%2F7e3e6709c93d70cfce8f5f2af2dcd100baa12ba4.jpg"
          },
          {
            url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523358733178&di=633993f8baa773b24f34cc5f491be2bd&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D608211dfad86c9171c0e5a7aa1541aba%2F7e3e6709c93d70cfce8f5f2af2dcd100baa12ba4.jpg"
          },
          {
            url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523358733178&di=633993f8baa773b24f34cc5f491be2bd&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D608211dfad86c9171c0e5a7aa1541aba%2F7e3e6709c93d70cfce8f5f2af2dcd100baa12ba4.jpg"
          }
        ]
      }
    }
  }
</script>
<style scoped>
  .imglist{
    width: 100%;
    height: 304px;
  }
  .imglist .list{
    width: 170px;
    height: 130px;
    float: left;
    margin-left: 25px;
    margin-top: 20px;
  }
  .imglist .list img{
    display: block;
    width: 100%;
    height: 100%;
  }
  .imglist .list:nth-child(3n+1){
    margin-left: 0;
  }
</style>